<template>
   <div class="common-layout">
        <el-container class="index-con">
            <el-aside class="index-aside" style="width: 240px;">
                <el-menu default-active="/person" class="side-menu" router :background-color="isNightMode ? '#1a1a1a' : '#f5f7fa'"
                    :text-color="isNightMode ? '#e0e0e0' : '#2c3e50'" :active-text-color="'#409EFF'" style="height: 100%;">
                    <div class="system-title">
                        <span class="title-text">NERV</span>
                        <div class="title-decoration"></div>
                    </div>
                    <el-menu-item index="/person" class="menu-item">
                        <el-icon><Menu /></el-icon>
                        <span>考生管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <Header />
                </el-header>
                <el-main class="index-main">
                    <div class="table-section">
                        <div class="filter-bar">
                            <div class="filter-items">
                                <el-input v-model="searchText" placeholder="请输入大写字母查询" class="search-input">
                                    <template #prefix>
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </template>
                                </el-input>
                                <el-button type="primary" class="search-btn">
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                    查询
                                </el-button>
                                <el-button class="refresh-btn">
                                    <el-icon>
                                        <Refresh />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>

                        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{
                            background: '#f8faff',
                            color: '#2c3e50',
                            fontWeight: '600',
                            fontSize: '14px'
                        }" :cell-style="{
                            fontSize: '14px',
                            padding: '12px 0'
                        }">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column prop="name" label="姓名" width="120" align="center" />
                            <el-table-column prop="account" label="账号" width="120" align="center" />
                            <el-table-column prop="department" label="所属部门" min-width="180" align="center" />
                            <el-table-column prop="phone" label="手机号码" width="150" align="center" />
                            <el-table-column prop="email" label="邮箱" width="180" align="center" />
                            <el-table-column prop="status" label="状态" width="100" align="center">
                                <template #default="scope">
                                    <el-tag :type="scope.row.status === '激活' ? 'success' : 'info'">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
                            <el-table-column label="操作" width="180" align="center" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" link @click="handleEdit(scope.row)">
                                        <el-icon><Edit /></el-icon>
                                    </el-button>
                                    <el-button type="primary" link @click="handleView(scope.row)">
                                        <el-icon><View /></el-icon>
                                    </el-button>
                                    <el-button type="danger" link @click="handleDelete(scope.row)">
                                        <el-icon><Delete /></el-icon>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination">
                            <span class="page-text">共 {{ total }} 条记录</span>
                            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next" :total="total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Menu, Search, Refresh, Edit, View, Delete } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import Header from '@/components/Header.vue';
import { useTheme } from '@/stores/themeStore';
import { ElMessageBox } from 'element-plus';

const router = useRouter();
const themeStore = useTheme();
const isNightMode = computed(() => themeStore.isNightMode);

// 搜索相关
const searchText = ref('');

// 表格数据
const tableData = ref([
    {
        name: '小帅',
        account: 'Account001',
        department: 'NERV/数学部',
        phone: '',
        email: '',
        status: '激活',
        createTime: '2025-03-17 20:15:56'
    },
    {
        name: '名称002',
        account: 'Account002',
        department: 'NERV/英语部',
        phone: '',
        email: '',
        status: '激活',
        createTime: '2025-03-17 20:15:56'
    },
    {
        name: '名称003',
        account: 'Account003',
        department: 'NERV/语文部',
        phone: '',
        email: '',
        status: '激活',
        createTime: '2025-03-17 20:15:56'
    }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(15);
const total = ref(3);

const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
};

const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
};

// 操作相关
const handleEdit = (row) => {
    console.log('编辑', row);
};

const handleView = (row) => {
    console.log('查看', row);
};

const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除该考生？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        console.log('删除', row);
    }).catch(() => {});
};
</script>

<style  scoped>
.index-con {
    width: 100vw;
    height: 100vh;
    background-color: var(--el-bg-color);
}

.index-aside {
    background-color: var(--el-menu-bg-color);
    border-right: 1px solid var(--el-border-color-lighter);
    transition: all 0.3s ease;
}

.system-title {
    padding: 20px;
    text-align: center;
    position: relative;
}

.title-text {
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.title-decoration {
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #409EFF, transparent);
    margin: 10px auto 0;
}

.create-exam-item {
    padding: 20px !important;
    margin: 0 !important;
    height: auto !important;
}

.create-exam-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.create-exam-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.menu-item {
    margin: 4px 0;
    border-radius: 4px;
}

.submenu-item {
    padding-left: 54px !important;
}

.main-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.index-main {
    padding: 20px;
    background-color: var(--el-bg-color-page);
}

.table-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.filter-bar {
    margin-bottom: 20px;
}

.filter-items {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-input {
    width: 240px;
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.refresh-btn {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    margin-top: 20px;
}

.page-text {
    color: #606266;
    font-size: 14px;
}
</style>